<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="xx,xx,xx" />
    <meta name="description" content="yyyyyyy" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta property="qc:admins" content="70003766576320416375" />
    <meta name="format-detection" content="telephone=no">
    <title>银行卡</title>
    <link rel="stylesheet" href="../css/base/jquery-ui-1.10.3.css" type="text/css">
    <link rel="stylesheet" href="../plugin/bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/job.css">
    <link rel="stylesheet" href="../css/add-card.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  <style>
      .content{
          padding: 10px;
      }
      .card-box{
          background: white;
          padding: 5px 10px;
      }

      .card-box label:first-child{
          border-bottom: 1px solid lightgrey;
      }
      .btn-submit{
          width: 100%;
      }
      .send-code{
          width: auto;
          font-weight: 500;
          right: 0;
          font-size: 13px;
          background: #22d673;
          border: none;
          position: absolute;
          top: 10px;
          padding: 2px 3px;
          color: white;
      }

  </style>
</head>
<body>
<div class="container-fluid">
    <!--header start-->
    <div class="row header">
      <div><span id="back" class="glyphicon  glyphicon-chevron-left" style="float: left;cursor: pointer;"></span>添加银行卡</div>
    </div>
        <!--header end-->

    <!--content start-->
    <div class="row content">
            <h6>请绑定持卡人本人的银行卡</h6>
            <div class="card-box">
                <form   name="myForm"  data-ng-app="myApp" data-ng-controller="myController">
                    <label>
                        持卡人<input type="text" value="朱堉雷" readonly  style="color:lightgrey">
                    </label>
                    <label style="position: relative">
                        卡号<input type="text"  name="number" required >
                        <button  class="btn  send-code"  data-ng-click="getTestCode()" data-ng-bind="description" data-ng-disabled="canClick"></button>
                    </label>
                </form>
            </div>
        <div></div>
        <a href="add-card1.html"><button class="btn btn-submit"  disabled id="next-step">下一步</button></a>
    </div>
    <!--content end-->

</div>

</body>
<script src="../js/common/jquery-2.1.4.min.js"></script>
<script src="../js/index.js"></script>
<script src="../js/card.js"></script>
<script src="../plugin/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../plugin/angular.js"></script>
<script>
    var myApp=angular.module('myApp',[]);
        myApp.controller('myController',function($scope,$interval){
            $scope.canClick=false;//发送验证码按钮可以点击
             $scope.description='发送验证码';
            var second=59;
            var timerHandler;
            $scope.getTestCode=function(){
                timerHandler=$interval(function(){
                   timer();
                },1000);
                    function timer(){
                        if(second<0){
                            $interval.cancel(timerHandler);
                            second=59;
                            $scope.canClick=false;
                            $scope.description='发送验证码';
                        }
                        else
                         {
                             $scope.description=second+'后重发';
                             second--;
                             $scope.canClick=true;//发送验证码按钮不可点击
                         }
                }
            }

        });
</script>
</html>